<style lang="scss" scoped>
.task-details {
    .details-nav {
        padding: 25px 0;
        display: flex;
        &>div {
            flex: 1;
            height: 150px;
            border-radius: 10px;
        }
        &>div+div {
            margin-left: 100px;
        }
    }

    .card-cont {
        height: 100%;
        overflow: hidden;
    }

    .card-click {
        position: relative;
        width: 100%;
        height: 100%;
        margin: auto;
        color: rgba(51, 122, 183, 1);
        .ivu-card:hover {
            box-shadow: 0px 0px 10px 0px rgba(29, 74, 113, 1);
        }
        .ivu-card-bordered {
            border: 1px solid rgba(51, 122, 183, 1);
        }
        .card-img {
            width: 70px;
            height: 70px;
            margin: 25px 5px;
            float: left;
        }
        .card-name {
            float: left; // height: 57px;
            // width: 210px;
            // width:69%;
            font-size: 18px;
            margin-top: 25px;
            line-height: 57px;
            font-weight: 600;
            word-wrap: break-word;
        }
        .card-img+.card-name {
            margin-left: 25px;
        }

        &:hover {
            cursor: pointer;
        }
        &.active {
            .ivu-card {
                background-color: rgba(51, 122, 183, 1);
                color: #fff;
            }
        }
    }
    .task-content {
        position: relative;
        margin-top: 20px;
        border-top: 20px solid #FFF;
    }
}

.details-nav>div:nth-of-type(2) .card-click .card-name {
    width: 62%;
}

.card1 {
    .card-img {
        background-image: url('/static/icon/taskicon.png');
        background-position: 8px 0;
    }
    &.active {
        .card-img {
            background-image: url('/static/icon/taskicon.png');
            background-position: 62px 0;
        }
    }
}

.card2 {
    .card-img {
        background-image: url('/static/icon/taskicon.png');
        background-position: 8px -63px;
    }
    &.active {
        .card-img {
            background-image: url('/static/icon/taskicon.png');
            background-position: 62px -63px;
        }
    }
}

.card3 {
    .card-img {
        background-image: url('/static/icon/taskicon.png');
        background-position: 8px -132px;
    }
    &.active {
        .card-img {
            background-image: url('/static/icon/taskicon.png');
            background-position: 62px -132px;
        }
    }
}

.card4 {
    .card-img {
        background-image: url('/static/icon/taskicon.png');
        background-position: 8px -189px;
    }
    &.active {
        .card-img {
            background-image: url('/static/icon/taskicon.png');
            background-position: 62px -189px;
        }
    }
}

.task-title {
    padding: 30px 20px 0px;
    width: 100%;
    .title {
        font-size: 18px;
        color: #666;
        font-weight: 600;
    }
    .task-right {
        font-size: 14px;
        .task-download {
            float: right;
            padding: 7px 10px;
            background: #4578ad;
            color: #fff;
            border-radius: 3px;
        }
    }
}
</style>
<template>
    <div>
        <div class="task-title">
            <Row>
                <Col span="12">
                <div class="title">
                    <span>样本编号：</span>
                    <span style='padding: 0 10px;'>{{sampleCode}}</span>
                    <Button type="ghost" @click='back'>返回</Button>
                </div>
                </Col>
                <Col span="12">
                <div class="task-right">
                    <!-- <a class="task-download" :href="'http://42.123.124.204:8081/dchealth-platform/1.0/data/vcfdownload?jobid='+this.$store.state.jobid" download>下载vcf文件</a>  -->
                    <a class="task-download" download>下载vcf文件</a>
                </div>
                </Col>
            </Row>
        </div>
        <div id='cmain'>
            <Row class="main_inner">
                <div class="task-details">
                    <div class="details-nav">
                        <div title="质控与统计">
                            <div class="card1 card-click" @click="currentView='quality'" :class="{'active':'quality'==currentView}">
                                <!-- 设置高亮 -->
                                <div class="card-cont">
                                    <Card style="height:100%;">
                                        <div class="card-img"></div>
                                        <div class="card-name">
                                            <span>质控与统计</span>
                                        </div>
                                    </Card>
                                </div>
                            </div>

                        </div>
                        <div title="clean reads和参考基因组比对与外显子捕获统计">
                            <div class="card2 card-click" @click="currentView='clean'" :class="{'active':'clean'==currentView}">
                                <!-- 设置高亮 -->
                                <div class="card-cont">
                                    <Card style="height:100%;">
                                        <div class="card-img"></div>
                                        <div class="card-name" style="line-height:inherit;">
                                            <span>clean reads和参考基因组比对与外显子捕获统计</span>
                                        </div>

                                    </Card>
                                </div>
                            </div>
                        </div>
                        <div title="突变检测及注释">
                            <div class="card3 card-click" @click="currentView='note'" :class="{'active':'note'==currentView}">
                                <!-- 设置高亮 -->
                                <div class="card-cont">
                                    <Card style="height:100%;">
                                        <div class="card-img"></div>
                                        <div class="card-name">
                                            <span>突变检测及注释</span>
                                        </div>
                                    </Card>
                                </div>
                            </div>
                        </div>
                        <div title="原始数据说明">
                            <div class="card4 card-click" @click="currentView='nintdata'" :class="{'active':'nintdata'==currentView}">
                                <!-- 设置高亮 -->
                                <div class="card-cont">
                                    <Card style="height:100%;">
                                        <div class="card-img"></div>
                                        <div class="card-name">
                                            <span>原始数据说明</span>
                                        </div>

                                    </Card>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Row>
            <Row style='margin-top: 30px;'>
                <div class="task-details">
                    <!-- <quality></quality> -->
                    <component :is="currentView">
                        <!-- 组件在 vm.currentview 变化时改变！ -->
                    </component>
                </div>
            </Row>
        </div>
    </div>
</template>
<script>
export default {
    name: "task-index",
    data() {
        return {
            path: '',
            openLoadModel: false,       // 下载弹框
            // downHttp: httpUrl.downHttp, //下载地址
            taskModelList: [],    // 弹层数据
            currentView: "quality",     //需要的组件名称
            show: true,
            sampleCode: ''
        }
    },
    // 实例创建时
    created() {
        this.currentView = this.$route.query.type;
        this.productId = this.$store.state.productId;
        this.sampleCode = this.$store.state.samplecode;
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        currentView(newVal, oldVal) {
            console.log()
            this.$router.push({
                path: "/rare/task-details",
                query: {
                    type: newVal
                }
            })
        },
        $route(newVal, old) {
            this.currentView = this.$route.query.type;
        }
    },
    methods: {
        back() {
            this.$router.push('/rare')
        },
        clickBtnTask(type, row) {
            this.openLoadModel = true;
        },
        // 下载
        handelBtnClick() {

        }
    },
    components: {
        quality: resolve => require(['./quality-control'], resolve),
        clean: resolve => require(['./clean-reads'], resolve),
        note: resolve => require(['./note'], resolve),
        nintdata: resolve => require(['./initial-data'], resolve)
    }
}
</script>


